<template>
    <div class="">
        <el-dialog title="编辑轮播" :visible.sync="dialog" width="30%" :before-close="dialogClose">
            <el-form ref="formData" :model="formData" label-width="100px">
                <el-form-item label="跳转地址" prop="path">
                    <el-input v-model="formData.path" placeholder="请输入跳转地址"></el-input>
                </el-form-item>
				<el-form-item label="轮播图" prop="icon">
				    <vUpload ref="vUpload" :file="formData.icon" @imageUrl="imageUrl"></vUpload>
				</el-form-item>
            	<el-form-item>
            		<el-button @click="dialogClose">取 消</el-button>
            		<el-button type="primary" @click="formSubmit">确 定</el-button>
            	</el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import vUpload from '../common/Upload.vue';
export default {
	components: {
		vUpload,
	},
	data() {
		return {
			dialog: false,
			formData: {
				id: 0,
				path: '',
				icon: '',
			},
		}
	},
	created() {
	},
	watch: {
		dialog () {
			if(this.dialog && this.formData.id > 0){
				console.log('111')
				this.getData()	
			} else if(!this.dialog){
				console.log('222')
				this.clearFormData()
				this.$emit('getData')
			}
		}
	},
	methods: {
		imageUrl (file) {
			this.formData.icon = file
		},
		dialogClose(){
			this.$emit('dialogToggle')
		},
		clearFormData () {
			for(let i in this.formData){
				if(i == 'id') {
					this.formData[i] = 0
				} else if(i == 'icon') {
					this.formData[i] = ''
					this.$refs.vUpload.tempFile = ''
				} else {
					this.formData[i] = ''
				}
			}
		},
		getData () {
			let t = this
			t.$apiPost('Banner/infos', this.formData).then(res => {
				console.log('res', res)
				if(res.code == 1) {
					this.formData = res.data
					this.$refs.vUpload.tempFile = res.data.icon
				}
			})
		},
		// 保存编辑
		formSubmit() {
			this.$apiPost('Banner/editData', this.formData).then(res => {
				if(res.code == 1) {
					this.$message(res.msg)
					this.dialogClose()
				} else {
					this.$message(res.msg)
				}
			})
		},
	}
}
</script>
<style scoped>
	.mselect{
		width: 100%;
	}
	.mtdiv{
		margin-top: 10px;
		display: inline-block;
		width: 100%;
	}
	.mtdiv .mtdiv-v{
		float: left;
		width: 50%;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
	}
	.mtdiv .mtdiv-v label{
		float: left;
		margin-right: 10px;
	}
	.mtdiv .el-input{
		float: left;
		width: 80%;
		margin: 5px 0;
	}
</style>
